<div class="user_container">
    <div class="row">
      <div class="col-md-1">
        <button class="btn btn-default addUser" type="submit" data-toggle="modal" data-target="#myModal">添加</button>
      </div>
      <div class="col-md-2">
         <input type="text" class="form-control user_search_text" id="exampleInputName2" placeholder="请输入用户名">
      </div>
      <div class="col-md-2">
        <select class="form-control user_search_text">
        <option class="val">请选择角色</option>
        <!-- <option value="">hh</option> -->
      </select>
      </div>
      <div class="col-md-1 user_search">
        搜索
      </div>
    </div>
    <div class="row">
      <table class="table table-hover">
       <thead>
         <th>序号</th>
         <th>用户名</th>
         <th>姓名</th>
         <th>角色</th>
         <th>性别</th>
         <th>状态</th>
         <th>手机号</th>
         <th>操作</th>
       </thead>
       <tbody>
         <!-- <tr>
           <td>1</td>
           <td>usernaem</td>
           <td>name</td>
           <td>role</td>
           <td>gender</td>
           <td>status</td>
           <td>18777772222</td>
           <td>
             <span>设置</span>
             <span>移出</span>
             <span>详情</span>
             <span>修改</span>
           </td>
         </tr> -->
         
       </tbody>
    </table>
    </div>
    <div class="row">
      <nav aria-label="Page navigation">
        <ul class="pagination">
          <li class="num">
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <!-- <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li> -->
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    
<!--添加模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">添加用户信息</h4>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                  <div class="col-sm-10">
                    <input type="email" class="form-control username" id="inputEmail3" placeholder="用户名">
                  </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                      <input type="email" class="form-control realname" id="inputEmail3" placeholder="姓名">
                    </div>
                  </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control password" id="inputPassword3" placeholder="密码">
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                        <div class="radio">
                            <label>
                              <input class='gender' type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                              男
                            </label> &nbsp;&nbsp;
                            <label>
                              <input class='gender' type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                              女
                            </label>
                          </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">手机号</label>
                    <div class="col-sm-10">
                      <input type="email" class="form-control telephone" id="inputEmail3" placeholder="手机号">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">生日</label>
                    <div class="col-sm-10">
                      <input type="email" class="form-control birth" id="inputEmail3" placeholder="生日">
                    </div>
                  </div>
              </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary saveOrUpdate">保存</button>
        </div>
      </div>
    </div>
  </div>
<!--模态框结束 -->
<!--设置模态框 -->
<!-- 给设置按钮增加：data-toggle="modal" data-target=".szmd" -->
 <div class="modal fade szmd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="用户名" readonly value="lisi">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">角色</label>
                    <div class="col-sm-10">
                        <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                        </label>
                        <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                        </label>
                        <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                        </label>
                    </div>
                    
                </div>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>
 <!--模态框结束 -->
<!-- 删除模态框 -->
<!-- 给删除按钮增加：data-toggle="modal" data-target=".delete" -->
 <div class="modal fade delete" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">提示</h4>
        </div>
        <div class="modal-body">
          <p>此操作将永久删除文件，是否继续?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary yDelete">确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 模态框结束-->
  <!-- 删除成功后的模态框 -->
  
  <div class="modal fade success-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 模态框结束 -->
</div>

<script>
//声明全局变量
var baseUrl='http://123.57.57.227:7788/';
var currentPage=1,pageSize=10;
var id;
//通过promise封装请求函数
function getData(type,url){
    var p=new Promise((resolve,reject)=>{
        //执行异步请求
        $.ajax({
            type:type,
            url:url,
            headers:{
					"Authorization":sessionStorage.getItem("token")
				},
            success:function(data){
                resolve(data);
            }
        });
    });
    return p;
}
//请求角色信息,然后处理请求成功后的数据
getData('get',baseUrl+'role/findAll').then(function(data){
    // console.log(data.data);
    data.data.forEach(function(item){
        $('.user_container .val').after('<option>'+item.name+'</option>')
    });
});
//封装数据分页处理函数
function getUserData(url){
    return getData('get',baseUrl+url).then(function(data){
      //因为每次调用都会新增分页按钮，所有先清空
      if($('.clickNum').length){
          $('.clickNum').remove();
      }
      //根据用户总量新增分页按钮
      var num=Math.ceil((data.data.total)/pageSize);
      for(i=num;i>0;i--){
          $('.user_container .num').after(`<li class='clickNum'><a href="#">`+i+`</a></li>`)
      }
      //分页按钮绑定
      $('.clickNum').click(function(){
          currentPage=$(this).text();
          getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize);
      })
        //清空tbody，遍历追加tr
      $('.user_container tbody').empty();
      data.data.list.forEach(function(item){
          $('.user_container tbody').append(`<tr>
              <td>`+item.id+`</td>
              <td>`+item.username+`</td>
              <td>`+item.realname+`</td>
              <td>`+item.politicsStatus+`</td>
              <td>`+item.gender+`</td>
              <td>`+item.status+`</td>
              <td>`+item.telephone+`</td>
              <td>
                  <span data-toggle="modal" data-target=".szmd">设置</span>
                  <span class="deleteById" data-toggle="modal" data-target=".delete">移除</span>
                  <span class='details'>详情</span>
                  <span class='update' data-toggle="modal" data-target="#myModal">修改</span>
              </td>
          </tr>`);
      });

      //给删除绑定
      $('.deleteById').click(function(){
          //通过id删除，首先获取id (td->tr->tbody->第一个tr->内容)
          var id=$(this).parent().parent().children().eq(0).text();
          // alert(id);
          $('.yDelete').click(function(){
              getData('get',baseUrl+'baseUser/deleteById?id='+id).then(function(data){
                  $('.delete').modal('hide');
                  if(data.status==200){
                      getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize); 
                      suc(data);
                  }
              })
          })
      });

      //给详情绑定，加载个人信息页面并且模拟点击个人信息
      $('.details').click(function(){
          $('.content-main').load('./pages/user.html');
          $('.container-left li').eq(5).click();
      });

      //给修改绑定
      $('.update').click(function(){
          //拿到当前用户的username,realname,gender,password,telephone,brith
          id=$(this).parent().parent().children().eq(0).text();
          // console.log(id);
          getData('get',baseUrl+'baseUser/findAll').then(function(data){
              // console.log(data.data);
              data.data.forEach(function(item){
                  // alert(item.id);
                  if(item.id==id){
                      // console.log(item.gender);
                      //设置默认的内容
                      $('.username').val(item.username);
                      // console.log($('.username').val())
                      $('.realname').val(item.realname);
                      $('.password').val(item.password);
                      $('.telephone').val(item.telephone);
                      $('.birth').val(item.birth);
                      if(item.gender=='female'){
                          $('.gender').eq(1).prop('checked',true);
                      }else{
                          $('.gender').eq(0).prop('checked',true);
                          $('.gender').eq(1).prop('checked',false);
                      }
                  }
              })
          })
          // $('.saveOrUpdate').click(function(){
          //   if(id){
          //     console.log(id) 这样id会在点击第n次保存之后执行n次
          //   }
          // })
      })
     
    })
}
//默认调用数据处理函数
getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize);

//给搜索按钮绑定
$('.user_search').click(function(){
    //1.获取用户数据(下拉菜单，输入框获取内容用val())
    var username=$('.user_search_text').eq(0).val();
    var rolename=$('.user_search_text').eq(1).val();
    // alert(username);alert(rolename);
    //2.判断用户输入
	if(username!='' && rolename=='请选择角色'){
		url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username;
	}else if(username=='' && rolename!='请选择角色'){
		url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&rolename='+rolename;
	}else if(username!='' && rolename!="请选择角色"){
		url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username+'&rolename='+rolename;
	}else{
		url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize;
	}
	//3.发送请求
  getUserData(url);
  // $('.clickNum').click(function(){})
})

//给添加按钮绑定事件
$('.addUser').click(function(){
  //清空所有项，id设为undefined
  if(id){
    id=undefined;
  };
  $('.username').val('');
  $('.realname').val('');
  $('.password').val('');
  $('.telephone').val('');
  $('.birth').val('');
  $('.gender').eq(0).prop('checked',true);
});

//保存按钮只绑定一次，当修改时id存在，当添加时id不存在
$('.saveOrUpdate').click(function(){
    if(id){
      // console.log(id)
      save(userData(id));
    }else{
      console.log(userData());
      save(userData());
     
    }
})

//封装成功后弹框函数
function suc(data){
  $('.success-modal p').html(data.message);
  $('.success-modal').modal('show');
};
//封装获取url函数
function userData(id){
  // alert(id);
  var username=$('.user_container .username').val();
  var realname=$('.user_container .realname').val();
  var password=$('.user_container .password').val();
  var telephone=$('.user_container .telephone').val();
  var birth=$('.user_container .birth').val();
  if($('.user_container .gender').eq(0).prop('checked')){
      var gender='male';
  }else{
      var gender='female'
  }
  // alert(username)
  if(username && realname && password && gender && (id==undefined)){
      if(telephone && birth){
          url='username='+username+'&password='+password+'&telephone='+telephone+'&realname='+realname+'&gender='+gender+'&birth='+birth;
      }else if(telephone){
          url='username='+username+'&password='+password+'&telephone='+telephone+'&realname='+realname+'&gender='+gender;
      }else{
          url='username='+username+'&password='+password+'&realname='+realname+'&gender='+gender;
      }
  }else if(username && realname && password && gender && id){
      if(telephone && birth ){
          url='id='+id+'&username='+username+'&password='+password+'&telephone='+telephone+'&realname='+realname+'&gender='+gender+'&birth='+birth;
      }else if(telephone){
          url='id='+id+'&username='+username+'&password='+password+'&telephone='+telephone+'&realname='+realname+'&gender='+gender;
      }else{
          url='id='+id+'&username='+username+'&password='+password+'&realname='+realname+'&gender='+gender;
      }
  }else{}
  return url;
}
//封装保存函数
function save(url){
  getData('post',baseUrl+'baseUser/saveOrUpdate?'+url).then(function(data){
        // alert(data.message);
      $('#myModal').modal('hide');
      //刷新表格数据
      getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize); 
      if(data.status==200){
        //显示成功后的模态框
        suc(data);
      }if(data.status==500){
        suc(data);
      }
  })
}
// $('.saveOrUpdate').click(function(){
//   //获取用户输如内容
//   // var username=$('.user_container .username').val();
//   // var realname=$('.user_container .realname').val();
//   // var password=$('.user_container .password').val();
//   // var telephone=$('.user_container .telephone').val();
//   // var birth=$('.user_container .birth').val();
//   // if($('.user_container .gender').eq(0).prop('checked')){
//   //     var gender='male';
//   // }else{
//   //     var gender='female'
//   // }
//   // console.log(gender);
 
  // if(username && realname && password && gender){
  //     if(telephone && birth){
  //         url='baseUser/saveOrUpdate?username='+username+'&password='+password+'&telephone='+telephone+'&realname='+realname+'&gender='+gender+'&birth='+birth;
  //     }else if(telephone){
  //         url='baseUser/saveOrUpdate?username='+username+'&password='+password+'&telephone='+telephone+'&realname='+realname+'&gender='+gender;
  //     } else{
  //         url='baseUser/saveOrUpdate?username='+username+'&password='+password+'&realname='+realname+'&gender='+gender;
  //     }
//     // console.log(url);
//     //发送保存更新请求
//     // getData('post',baseUrl+url).then(function(data){
//     //     // alert(data.message);
//     //   $('#myModal').modal('hide');
//     //   if(data.status==200){
//     //     getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize); 
//     //     suc(data);
//     //   }if(data.status==500){
//     //     suc(data);
//     //   }
//     // })
//   // }
     
// })


</script>

<style>
    .user_container{
      /* height: 100px; */
      padding-left:10px;
      color: #666666;
    }
    .user_container .col-md-1,.user_container .col-md-2{
      height:32px;
      color: #2cb5ac;
	    padding-left: 5px;
    }
    .user_container .user_search{
      font-size: 12px;
      line-height: 32px;
    }
    .user_container .user_search:hover{
      cursor: pointer;
    }
    .user_container .btn-default{
      color:#fff;
      background-color: #2cb5ac;
      font-size: 12px;
    }
    .user_container table td span:hover{
      cursor: pointer;
    }
    .user_container table th,.user_container table td{
      font-size: 12px;
    }
    [class*='user_search_text']{
      height: 32px;
      font-size: 12px;
    }
  
  </style>
